<template>
    <el-main style="display:flex;">
        <el-card style="width:200px;" v-for="bf of binaryFiles" :key="bf.id">
            <img :src="`/api/blog/file/query/${bf.id}/${bf.filename}.${bf.extname}`" class="image">
            <div style="padding: 14px;">
                <div class="bottom clearfix">
                    <el-button type="text" class="button" @click="handleDelete(bf.id)">Delete</el-button>
                </div>
            </div>
        </el-card>
    </el-main>
</template>

<script>
import Vue from "vue";

export default {
    name: `binaryFileMgmt`,
    data: function() {
        return {
            binaryFiles: []
        };
    },
    mounted: function() {
        this.load();
    },
    methods: {
        handleDelete(id) {
            this.$confirm(
                this.$t(`message.delete.confirm`),
                this.$t(`message.delete.warn`),
                {
                    confirmButtonText: this.$t(`button.confirm`),
                    cancelButtonText: this.$t(`button.cancel`),
                    type: `warning`
                }
            ).then(() => {
                Vue.axios
                    .get(`/api/admin/fileadmin/admin/deleteBinaryFile/${id}`)
                    .then(response => {
                        if (response.status === 200) {
                            this.load();
                        } else {
                            throw "error";
                        }
                    })
                    .catch(error => {
                        router.push('/ui/login');
                    });
            });
        },
        load() {
            Vue.axios
                .get(`/api/admin/fileadmin/query/listBinaryFiles`)
                .then(response => {
                    //console.log(JSON.stringify(response.data));
                    if (response.status === 200) {
                        this.binaryFiles = response.data;
                    } else {
                        throw "error";
                    }
                })
                .catch(error => {
                    router.push('/ui/login');
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.image {
    width: 200px;
    display: block;
}
</style>
